<template>
    <button class="btn" @click.stop="$router.push(link)" :class="{   'btn-primary':type=='primary',
                                    'btn-warn':type=='warn',
                                    'btn-success':type=='success',
                                    'btn-danger':type=='danger',
                                    'btn-dark':type=='dark',
                                    'btn-info':type=='info',
                                    'btn-lg':size=='lg',
                                    'btn-sm':size=='sm',
                                    'btn-xs':size=='xs',
                                    'btn-text': isText,
                                    'icon-rt': iconRight,
                                    'btn-outline': outline,
                                    'btn-block' : block,
                                    'round' : round
                                }">
        <i class="icon" :class="icon" ></i>
        <slot></slot>
    </button>
</template>

<script>
export default {
  name: 'Title',
  props:{
      type : {
          type:String,
          default:''
      },
      icon : String,
      size: String,
      link: {
        type: String,
        default: ''
      },
      outline : {
          type : Boolean,
          default : false
      },
      block : {
          type : Boolean,
          default : false
      },
      isText : {
          type : Boolean,
          default : false
      },
      iconRight : {
          type : Boolean,
          default : false
      },
      round : {
          type : Boolean,
          default : false
      },

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
$btn-height = 36px
$btn-height-lg = 40px
$btn-height-md = 32px
$btn-height-sm = 28px
$btn-height-xs = 24px
$btn-radius = 3px
.btn
  display: flex
  align-items: center
  justify-content: center
  padding: 0 15px
  height: $btn-height
  font-size: 14px
  text-align: center
  text-decoration: none
  outline: none
  transition: all .2s
  line-height: 1
  background: #fff
  color: #666
  white-space: nowrap
  fine-border-box(#ccc,3px)
  border-width: 0 1px 1px 0
  &.round
    border-radius: 40px !important
  &[disabled]
    opacity: .5
  &.btn-block
    width: 100%
  &.btn-outline
    background-color: transparent !important
  &:active
    opacity: .9
    box-shadow: 1px 1px 3px rgba(black, 0.1) inset
  &.btn-primary,
  &.btn-warn,
  &.btn-success,
  &.btn-info,
  &.btn-danger,
  &.btn-dark
    color: #fff
    &.btn-outline:active
      color: #fff
  &.btn-primary
    background-color: $primary
    &:after
     border-color: darken($primary,10%)
    &.btn-outline
      color: $primary
      &:active
        background-color: $primary !important
    &.btn-text
      color: $primary
  &.btn-warn
    background-color: $orange
    &:after
      border-color:darken($orange,10%)
    &.btn-outline
      color: $orange
      &:active
        background-color: $orange !important
    &.btn-text
      color: $orange
  &.btn-success
    background-color: $green
    &:after
      border-color:  darken($green,10%)
    &.btn-outline
      color: $green
      &:active
        background-color: $green !important
    &.btn-text
      color: $green
  &.btn-info
    background-color: $blue
    &:after
      border-color: darken($blue,10%)
    &.btn-outline
      color: $blue
      &:active
        background-color: $blue !important
    &.btn-text
      color: $blue
  &.btn-danger
    background-color:  darken($red,10%) 
    &:after
      border-color: $red
    &.btn-outline
      color: $red
      &:active
        background-color: $red !important
    &.btn-text
      color: $red
  &.btn-dark
    background-color: $dark
    &:after
      border-color: $dark
    &.btn-outline
      color: $dark
      &:active
        background-color: $dark !important
    &.btn-text
      color: $dark
  &.btn-text
    background-color: transparent !important
    border-color: transparent !important
    padding: 0
  &.btn-lg
    height: $btn-height-lg
    font-size: 16px
    padding: 0 20px
  &.btn-md
    height: $btn-height-md
    font-size: 13px
    padding: 0 10px
  &.btn-sm
    height: $btn-height-sm
    font-size: 12px
    padding: 0 10px
  &.btn-xs
    height: $btn-height-xs
    font-size: 12px
    padding: 0 5px
  .icon
    font-size: 18px
    margin: 0 2px
    color: inherit
  &.icon-rt
    flex-direction: row-reverse;
    .icon
      margin-left: 2px
      margin-right: 0 !important


</style>
